import React, { useState } from 'react';
import AppLayout from '../layout/AppLayout';
import Modal from '../components/Modal';
import { getChipsWithPrimary } from '../utils/chipConfig';
import './form.css';
import './frame8.css';

export default function SaveJSONDialogOptions() {
  const [showSaveModal, setShowSaveModal] = useState(true)

  return (
    <>
      <AppLayout
        active="文件"
        chips={getChipsWithPrimary('细胞类型', '/cell-config')}
        subbar={(
          <div style={{ display:'flex', alignItems:'center', gap:12, width:'100%' }}>
            <div className="f8-icon-btn" style={{ opacity: 0.5 }}>◀</div>
            <div className="f8-icon-btn">＋</div>
            <div className="f8-pill">
              <span style={{ color:'#667085', padding:'0 8px' }}>＋ 细胞</span>
              <span style={{ color:'#667085', padding:'0 8px', borderLeft:'1px solid #e6eaee', borderRight:'1px solid #e6eaee' }}>＋ 分段</span>
              <span style={{ color:'#667085', padding:'0 8px' }}>＋ 机制</span>
            </div>
            <div style={{ marginLeft:'auto' }} className="f8-icon-btn">▾</div>
          </div>
        )}
      >
        <div style={{ display: 'flex', gap: 40, paddingTop: 24 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="f8-segment-buttons">
              <button className="f8-segment-btn active">分段0</button>
              <button className="f8-segment-btn">分段1</button>
              <button className="f8-segment-btn">分段2</button>
            </div>
          </div>
          
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="field">
              <label>分段名称</label>
              <div className="input"></div>
            </div>
            
            <div className="f8-tabs">
              <button className="f8-tab active">通用</button>
              <button className="f8-tab">几何结构</button>
              <button className="f8-tab">拓扑结构</button>
            </div>
          </div>
        </div>
      </AppLayout>

      {showSaveModal && (
        <Modal
          title="另存为JSON文件"
          onClose={() => setShowSaveModal(false)}
          onConfirm={() => setShowSaveModal(false)}
          confirmText="加载"
        >
          <div className="field" style={{ marginBottom: 16 }}>
            <label>文件名</label>
            <div className="input">output_Sat_27_Sep_2025_12_36_47_GMT</div>
          </div>
          
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
            <div style={{ padding: 12, background: '#f9fbfc', borderRadius: 8, cursor: 'pointer' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span style={{ color: '#2b8a6e' }}>✓</span>
                <strong>高级网络参数 (netParams)</strong>
              </div>
              <div style={{ fontSize: 12, color: '#6b7280', marginLeft: 24 }}>细胞规则、连接规则等</div>
            </div>
            
            <div style={{ padding: 12, background: '#f9fbfc', borderRadius: 8, cursor: 'pointer' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span style={{ color: '#2b8a6e' }}>✓</span>
                <strong>模拟配置 (simConfig)</strong>
              </div>
              <div style={{ fontSize: 12, color: '#6b7280', marginLeft: 24 }}>持续时间、记录变量等</div>
            </div>
            
            <div style={{ padding: 12, background: '#f9fbfc', borderRadius: 8, cursor: 'pointer' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span style={{ color: '#d1d5db' }}>○</span>
                <span>实例化网络</span>
              </div>
              <div style={{ fontSize: 12, color: '#6b7280', marginLeft: 24 }}>所有细胞、连接等</div>
            </div>
            
            <div style={{ padding: 12, background: '#f9fbfc', borderRadius: 8, cursor: 'pointer' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span style={{ color: '#d1d5db' }}>○</span>
                <span>模拟数据</span>
              </div>
              <div style={{ fontSize: 12, color: '#6b7280', marginLeft: 24 }}>尖峰、轨迹等</div>
            </div>
          </div>
        </Modal>
      )}
    </>
  )
}

